import APIS from "@/apis";
import { Button, Checkbox, Col, List, Row, Space } from "antd";
import React from "react";
import { Component } from "react";
import { connect } from "umi";

class GoExamTesting extends Component<any>{
    state = {
        data: this.props.location.state,
        courseData: { courseName: '', },
        teacherData: { name: '' },
        detail: { zones: [{ id: 0 }] },
        zone1Questions: [],
        zone2Questions: [],
        zone3Questions: [],
        zone4Questions: [],
        answers: [{ id: -1, answer: '' }]
    }

    componentDidMount() {
        APIS.CourseAPI.GetCourseDetail({ id: this.state.data.courseId }).then(res => this.setState({ courseData: res }))
        APIS.OrgsAPI.GetTeacherDetail({ id: this.state.data.teacher }).then(res => this.setState({ teacherData: res }))
        this.getExamDetail(this.state.data)
    }
    getExamDetail(data: any) {
        APIS.ExamAPI.GetExamDetail(data).then(detail => {
            this.setState({ detail })
            APIS.ExamAPI.GetPaperQuestionList(detail.zones[0]).then(res => this.setState({ zone1Questions: res }))
            APIS.ExamAPI.GetPaperQuestionList(detail.zones[1]).then(res => this.setState({ zone2Questions: res }))
            APIS.ExamAPI.GetPaperQuestionList(detail.zones[2]).then(res => this.setState({ zone3Questions: res }))
            APIS.ExamAPI.GetPaperQuestionList(detail.zones[3]).then(res => this.setState({ zone4Questions: res }))
        })
    }

    render() {
        return (
            <div>
                <Row style={{ backgroundColor: "#ddd", paddingTop: '20px', paddingBottom: '20px' }} justify='center' gutter={[16, 16]}>
                    <Col span={10}>试卷标题：{this.state.data.title}</Col>
                    <Col span={10}>所属课程：{this.state.courseData?.courseName}</Col>
                    <Col span={10}>课程教师：{this.state.teacherData?.name}</Col>
                    <Col span={10}>课程简介：{this.state.data.description}</Col>
                </Row>
                <div style={{ fontSize: '20px' }}>一、选择题</div>
                <List>
                    {this.state.zone1Questions.map?.((v: any, i) => (
                        <List.Item key={i} >
                            <div>{i + 1 + '. ' + v.content}</div>
                            <Checkbox.Group
                                onChange={values => {
                                    this.state.answers[i] = { id: v.id, answer: values.toString() }
                                }}
                            >
                                {v.selections?.map((v: any, i: number) => (
                                    <Checkbox key={i} value={i}> {String.fromCharCode(65 + i) + '. ' + v}</Checkbox>
                                ))}
                            </Checkbox.Group>
                        </List.Item>
                    ))}
                </List>
                <div style={{ fontSize: '20px' }}>二、判断题</div>
                <List>
                    {this.state.zone2Questions.map?.((v: any, i) => (
                        <List.Item key={i} >
                            <div>{i + 1 + '. ' + v.content}</div>
                            <div>答案：{v.answer.split(',')?.map((v: any, i: number) => (
                                <div key={i} style={{ display: 'inline-block' }}>
                                    {String.fromCharCode(65 + parseInt(v))}
                                </div>
                            ))}</div>
                            <div>解析：{v.analyzing}</div>
                        </List.Item>
                    ))}
                </List>
                <div style={{ fontSize: '20px' }}>三、填空题</div>
                <List>
                    {this.state.zone2Questions.map?.((v: any, i) => (
                        <List.Item key={i} >
                            <div>{i + 1 + '. ' + v.content}</div>
                            <div>答案：{v.answer.split(',')?.map((v: any, i: number) => (
                                <div key={i} style={{ display: 'inline-block' }}>
                                    {String.fromCharCode(65 + parseInt(v))}
                                </div>
                            ))}</div>
                            <div>解析：{v.analyzing}</div>
                        </List.Item>
                    ))}
                </List>
                <div style={{ fontSize: '20px' }}>四、简答题</div>
                <List>
                    {this.state.zone2Questions.map?.((v: any, i) => (
                        <List.Item key={i} >
                            <div>{i + 1 + '. ' + v.content}</div>
                            <div>答案：{v.answer.split(',')?.map((v: any, i: number) => (
                                <div key={i} style={{ display: 'inline-block' }}>
                                    {String.fromCharCode(65 + parseInt(v))}
                                </div>
                            ))}</div>
                            <div>解析：{v.analyzing}</div>
                        </List.Item>
                    ))}
                </List>
                <Space>
                    <Button onClick={() => this.props.history.goBack()}>取消</Button>
                    <Button type='primary' htmlType='submit' onClick={() => console.log(this.state.answers)}>提交</Button>
                </Space>
            </div>
        );
    }
}
export default connect()(GoExamTesting)